<template>
  <div>
    <Header :left="true" leftText="返回" title="夜班指派列表" />
    <div>
      <van-row style="margin-top: 80px">
        <van-col><van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" /></van-col>
        <van-col class="message">指派清单</van-col>
      </van-row>
    </div>
    <div class="textScroll">
      <!-- 循环数据开始 -->
      <div v-for="item in itemsOne" :key="item.id">
        <div class="divStyle" @click="showDetail(item)">
          <van-row style="margin-top: 10px">
            <van-col span="15" style="
                margin-left: 5px;
                font-weight: bold;
                font-size: 15px;
                color: #a9a9a9;
              ">工厂：{{ item.siteName }}</van-col>
          </van-row>
          <van-row style="margin-top: 10px">
            <van-col span="15" style="
                margin-left: 5px;
                font-weight: bold;
                font-size: 15px;
                color: #a9a9a9;
              ">人员：{{ item.userName }}</van-col>
          </van-row>
          <van-row style="margin-top: 10px">
            <van-col span="24" style="
                margin-left: 5px;
                font-weight: bold;
                color: #a9a9a9;
                font-size: 15px;
              ">开始时间：<van-icon name="assets/time.png" />
              {{ item.startTime }}</van-col>
          </van-row>
          <van-row style="margin-top: 10px">
            <van-col span="24" style="
                margin-left: 5px;
                font-weight: bold;
                color: #a9a9a9;
                font-size: 15px;
              ">结束时间：<van-icon name="assets/time.png" />
              {{ item.endTime }}</van-col>
          </van-row>
          <van-row style="margin-top: 10px">
            <van-col span="24" style="
                margin-left: 5px;
                font-weight: bold;
                color: #a9a9a9;
                font-size: 15px;
              ">状态：{{ status[parseInt(item.status)] }}</van-col>
          </van-row>
        </div>
      </div>
      <!-- 循环数据结束 -->
    </div>
  </div>
</template>
<script>
import {
  Icon,
  Button,
  CellGroup,
  Cell,
  Field,
  tab,
  tabs,
  Col,
  Row,
  Image as VanImage,
  Divider,
  Checkbox,
  Pagination,
  Panel,
  Toast,
  Dialog,
} from "vant";
import { _httpClient } from "@/libs/api";
import { storage } from "@/libs/utils";
import {
  removeToken,
  getToken,
  setBaseApiFrefix,
  getBaseApiFrefix,
} from "@/libs/auth";
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(tab);
Vue.use(tabs);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);
Vue.use(Icon);
Vue.use(VanImage);
Vue.use(Divider);
Vue.use(Checkbox);
Vue.use(Pagination);
Vue.use(Panel);
Vue.use(Dialog);
import Header from "@/components/header.vue";
import apicloud from "@/libs/apicloud";

var repairStatusMap = new Map(); //维修单状态键值对

export default {
  components: {
    Button,
    Header,
    Icon,
    CellGroup,
    Cell,
    Field,
    tab,
    tabs,
    Col,
    Row,
  },

  data() {
    return {
      user: [], //当前登录用户
      currentEquipName: "",
      allSelected: false,
      selectFont: "一键勾选",
      screenWidth: 0,
      checked: true,
      active: 2,
      currentPage: 1,
      fileUrl: "",
      itemsOne: [],
      status: { 0: "关闭", 1: "开启" },
      sites: [],
      siteName: null,
    };
  },
  created: function () {
    let oldHight = api.winWidth;
    this.screenWidth = oldHight;
    this.user = JSON.parse(storage.get("user"));

    api.requestPermission(
      {
        list: ["camera", "microphone", "storage"],
      },
      function (ret, err) { }
    );
    
    try {
      var manageStorage = api.require("manageStorage");
      manageStorage.getDeviceVersion({}, function (rett) {
        if (Number(rett.version) >= 30) {
          manageStorage.hasAllFilePermission({}, function (ret) {
            if (ret.status == true) {
              return;
            } else {
              manageStorage.requestAllFilePermission({}, function (ret) {});
            }
          });
        } else {
          return;
        }
      });
    } catch {}
    
    let tkn = getToken();
    if (!tkn) {
      api.openWin({
        name: "login",
        url: "./login-login.html",
        rect: {
          x: 0,
          y: 150,
          w: api.winWidth,
          h: api.winHeight,
        },
      });
    }

    this.initQuertSiteList();
  },
  methods: {
    //详情展示
    showDetail(item) {
      let _this = this;
      api.openWin({
        name: "userAssigned",
        url: "./equipment-userAssigned.html",
        type: "fade",
        pageParam: {
          equip: item,
        },
      });
      api.addEventListener(
        {
          name: "result",
        },
        function (ret, err) {
          if (ret.value.item.length != 0) {
            for (let i = 0; i < _this.itemsOne.length; i++) {
              if (_this.itemsOne[i].id == ret.value.item.id) {
                _this.itemsOne.splice(i, 1);
              }
            }
          }
        }
      );
    },
    async queryWaitRepairList() {
      let _this = this;

      if (_this.user == "" || _this.user == undefined) {
        Dialog.alert({
          message: "获取当前登录用户失败，请重新登录系统",
          theme: "round-button",
        }).then(() => {
          // on close
        });
        return;
      }
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/app/equipment/userAssignedlist",
          {
            body: { siteKey: _this.user.site },
          }
        );

        if (res.code === 200) {
          Toast.clear();
          _this.itemsOne = res.rows;
          if (_this.itemsOne.length == 0) {
            let site = {
              siteName: _this.siteName,
              userName: "",
              startTime: "",
              endTime: "",
              status: "0",
            };
            _this.itemsOne.push(site);
          }
        } else {
          Toast.clear();
          Dialog.alert({
            message: res.msg,
            theme: "round-button",
          }).then(() => { });
        }
      } catch (e) {
        alert(JSON.stringify(e));
        Toast.fail(JSON.stringify(e));
      }
    },

    //初始化查询工厂下拉框
    async initQuertSiteList() {
      let _this = this;
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/app/report/siteList"
        );
        if (res.code === 200) {
          if (res.rows.length > 0) {
            _this.sites = [];
            res.rows.forEach(function (item, index) {
              if (item.siteKey == _this.user.site) {
                _this.siteName = item.siteName;
              }
              _this.queryWaitRepairList();
            });
            // alert(_this.sites
          }
        } else {
          //  alert(res.msg);
        }
      } catch (e) {
        //alert(JSON.stringify(e));
      }
    },

    //打开扫描
    showScanner() {
      let _this = this;
      if (
        api.deviceName.toLowerCase() == "huawei" ||
        api.deviceName.toLowerCase() == "honor"
      ) {


        var zyHmsScan = api.require('zyHmsScan');
        var param = {
          //returnAll:true
        };
        zyHmsScan.openDefaultView(param, function (ret) {
          //_this.addBarCode(ret.result);
          _this.currentEquipName = ret.result;
          _this.queryWaitRepairList();
          //api.alert({ msg: JSON.stringify(ret) });
        });
        // var QRScan = api.require("QRScan");
        // QRScan.customizedScanner(
        //   {
        //     rect: {
        //       x: 15, //（可选项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
        //       y: 0, //（可选项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
        //       w: 320, //（可选项）数字类型；模块的宽度；支持设置'auto'；默认：所属的 Window 或 Frame 的宽度
        //       h: 480, //（可选项）数字类型；模块的高度；支持设置'auto'；默认：所属的 Window 或 Frame 的高度
        //     },
        //     rectOfInterest: {
        //       x: 64, //（可选项）数字类型；扫码识别区域左上角的 x 坐标（相对于扫码区rect）；默认：0
        //       y: 65, //（可选项）数字类型；扫码识别区域左上角的 y 坐标（相对于扫码区rect）；默认：0
        //       w: 250, //（可选项）数字类型；扫码识别区域的宽度；默认：扫码区rect的宽度
        //       h: 250, //（可选项）数字类型；扫码识别区域的高度；默认：扫码区rect的高度
        //     },
        //     //tipString:'放入框内扫码',
        //     maskColor: "rgba(0,0,0,0.5)",
        //     scanLine: {
        //       color: "#00FF00",
        //       thickness: 2,
        //     },
        //     marginB: 30,
        //     formatType: "ALL",
        //   },
        //   function (ret) {
        //     if (ret) {
        //         let res = ret.result.split(",");
        //         _this.currentEquipName = ret.result;
        //         _this.queryWaitRepairList();
        //     }
        //   }
        // );
        //    QRScan.closeCustomizedScanner();
      } else {
        var FNScanner = _this.$ac.require("FNScanner");
        FNScanner.openScanner(
          {
            autorotation: true,
          },
          function (ret, err) {
            if (ret) {
              if (ret.eventType == "success" && ret.content != "") {
                let res = ret.content.split(",");
                _this.currentEquipName = ret.content;
                _this.queryWaitRepairList();
              }
            } else {
              //  alert(JSON.stringify(err));
            }
          }
        );
      }
    },
  },
};
</script>
<style>
html,
body {
  background-color: White;
}

.pic {
  width: 100%;
  text-align: center;
}

.clickbtn {
  width: 1;
  margin: 5px 10px;
  line-height: 45px;
  border: 1px #ccc dashed;
  text-align: center;
}

.buttonRight {
  position: fixed;
  margin-top: -40px;
  right: 10px;
  width: 88px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}

.buttonLeft {
  position: fixed;
  margin-top: -40px;
  right: 100px;
  width: 88px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}

.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}

.divStyle {
  border: 1px solid #dcdcdc;
  border-top-width: 3px;
  border-left-width: 3px;
  margin-left: 5px;
  margin-right: 4px;
  margin-top: 4px;
}

.pagination {
  position: fixed;
  bottom: 15px;
  width: 300px;
  margin-left: 10%;
  color: rgb(0, 0, 255);
  text-align: center;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 7rem;
  bottom: 1px;
  overflow: scroll;
  right: 0;
  width: 100%;
  margin-bottom: 0rem;
  z-index: 1;
}

.labelStyle {
  width: 70px;
  height: 20px;
  background-color: #ff9933;
  color: white;
  float: right;
  font-size: 13px;
  text-align: center;
  margin-top: -5px;
  line-height: 20px;
}
</style>
